<template>
  <AppLayout>
    <div style="padding-top: 50px; display: flex; justify-content: center;">
      <el-form :model="DoctorsList" ref="queryForm1" :rules="rules" label-position="left" label-width="120px" style="width: 600px; max-width: 100%;">
        <el-form-item label="项目名称">
          <el-input v-model="DoctorsList.xiangmumingcheng" disabled style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="预约时间">
          <el-date-picker
            v-model="DoctorsList.yuyueshijian"
            type="datetime"
            placeholder="选择日期时间"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="项目介绍">
          <el-input v-model="DoctorsList.xiangmujieshao" disabled style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="费用">
          <el-input v-model="DoctorsList.feiyong" disabled style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="医生姓名">
          <el-input v-model="DoctorsList.yishengxingming" disabled style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="用户账号">
          <el-input v-model="DoctorsList.createBy" disabled style="width: 250px;"></el-input>
        </el-form-item>
        <div style="display: flex; justify-content: center; padding: 20px 0;">
          <el-button type="primary" @click="submitForm">提交</el-button>
        </div>
      </el-form>
    </div>
  </AppLayout>
</template>

<script>
import AppLayout from "@/views/Layout1.vue";
import { listMedicalInfo, getMedicalInfo, delMedicalInfo, addMedicalInfo, updateMedicalInfo } from "@/api/medicalInfo/medicalInfo";
import { getUserProfile } from "@/api/system/user";
import { addReser} from "@/api/reser/reser";
export default {
  components: {
    AppLayout,
  },
  data() {
    return {
      appointment: {
        formattedDate: '',
        date: new Date(), // 这里可以根据实际需求初始化一个日期时间
        type: 'first-time', // 这里是预约类型的初始值
      },
      user: {},//用于存储user信息
      loading: false,
      DoctorsList: {},

      queryParams: {
        // 直接使用路由参数作为ID
        id: this.$route.params.id,
      },
      // 表单校验
      rules: {
        id: [
          { required: true, message: "主键不能为空", trigger: "blur" }
        ],
        addtime: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ],
        xiangmubianhao: [
          { required: true, message: "项目编号不能为空", trigger: "blur" }
        ],
        xiangmumingcheng: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        xiangmufenleiId: [
          { required: true, message: "项目分类ID不能为空", trigger: "blur" }
        ],
      },
    };
  },
  created() {
    this.getUser();//自动查询用户信息
    this.handleQueryById(); // 组件创建后自动查询
    this.appointment.formattedDate = this.formatDate(new Date())
  },
  methods: {
    handleQueryById() {
      if (!this.queryParams.id) {
        this.$message.error('请输入项目ID');
        return;
      }
      this.loading = true;
      console.log(this.DoctorsList)
      getMedicalInfo(this.queryParams.id).then(response => {
        // 由于返回的数据是单个项目的对象，我们需要将其放在一个数组
        this.DoctorsList = {...response.data, createBy: this.DoctorsList.createBy,xiangmuxxId:this.queryParams.id,yuyuebianhao:this.generateRandomFourDigitNumber(),addtime:this.appointment.formattedDate}; // 将响应数据放入数组
        this.loading = false;
      }).catch(error => {
        this.loading = false;
        this.$message.error('请求失败');
      });
    },
    //修改时间格式信息
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    generateRandomFourDigitNumber() {
      return Math.floor(Math.random() * 9000) + 1000;
    },
    getUser() {
      getUserProfile().then(response => {
        const { nickName } = response.data
        this.DoctorsList.createBy = nickName;
      });
    },
    submitForm() {
      // 使用 this.$refs.queryForm.validate 来触发表单验证
      this.$refs["queryForm1"].validate(valid => {
        if (valid) {
          // 通过验证后, 可以提交表单数据
          console.log(this.DoctorsList); // 输出表单数据到控制台
          // 请根据实际 API 的需要调整 addReser 的参数，这里假设 it's this.DoctorsList
          addReser(this.DoctorsList).then(response => {
            this.$message.success("新增成功");
            this.$router.push({ path: `/fonHome` });
          }).catch(error => {
            console.error('提交失败:', error);
            this.$message.error('提交失败');
          });
        } else {
          console.log('表单验证失败');
        }
      });
    },
  }
};

</script>
<style scoped>

</style>
